<template>
  <el-dialog
    title="添加规格"
    width="70%"
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
  >
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="specItemList"
      height="65vh"
      @current-change="handleCurrentChange"
    >
      <!--<el-table-column type="selection" width="55" align="center"/>-->
      <el-table-column label="" width="55" align="center">
        <template slot-scope="scope">
          <el-radio v-model="selectedId" :label="scope.row.id" class="radio-txt"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="规格编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column prop="serviceNames" label="关联服务" align="center">
        <template slot-scope="scope">
          <span>{{ newServiceNames(scope.row.serviceNames) || '通用' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="规格名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
    </el-table>


    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="confirmSelect">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<script>
  //规格列表
  import { list } from "@/api/shop/spec/spec";
  //商品Spu相关
  import { getSpecByServiceCodes } from "@/api/shop/goods";

  export default {
    name: 'spec-item-multiple-selector-comp',
    components: {},
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      dialogVisible(val) {
        console.log(val);
        if(val){
          this.getList()
        }
      }
    },
    data() {
      return {
        loading: true,
        //显示选择服务
        showServiceSelector: false,
        specItemList: [],
        total: 0,
        multipleSelection: [],
        defaultelection: [],
        servicesStr: '',
        specType: '',
        selectedId: null, // 单选，选中的id
        // selectedItem: null, // 单选，选中的row
      };
    },
    created() {
      // this.init()
    },
    mounted() {},
    methods: {
      newServiceNames(list){
        if(!list) return '';
        let txt = '';
        list.forEach((item, idx)=>{
          if(idx>0){
            txt += '、';
          }
          txt += item;
        });
        return txt
      },
      init: function() {

      },
      /**
       * 弹窗控制
       */
      closeDialog() {
        this.$emit('update:dialogVisible', false)
      },
      // 获取所有协议地址
      getList() {
        this.loading = true;
        let params = {};
        params['servicesStr'] = this.servicesStr;
        params['specType'] = this.specType;
        getSpecByServiceCodes(params).then(response => {
          console.log(response)
          this.loading = false;
          if (response.code === 200) {
            this.specItemList = [];
            response.data.forEach((item)=>{
              this.specItemList.push(item);
            })

            this.defaultSelectedList();
          }
        });
      },
      // 多选框选中数据
      // handleSelectionChange(selection) {
      //   console.log(selection);
      //   // this.multipleSelection  = selection;
      // },
      handleCurrentChange(selection){
        console.log(selection)
        if(selection){
          this.selectedId = selection.id;
          this.multipleSelection = [selection];
        }
      },
      /**
       * 确认选择
       */
      confirmSelect() {
        let params = {};
        params['multipleSelection'] = [];
        this.multipleSelection.forEach((item)=>{
          params['multipleSelection'].push(item);
        });

        this.$emit('confirm', params);
        this.closeDialog()
      },
      // 获取列表以后默认选中之前勾选的数据的逻辑
      defaultSelectedList() {
        this.$nextTick(() => {
          for(let i=0;i<this.defaultelection.length;i++){
            let itemInfo = this.defaultelection[i];
            for(let j=0;j<this.specItemList.length;j++){
              let selectedItem = this.specItemList[j];
              if(itemInfo.id === selectedItem.id){
                this.$refs.multipleTable.toggleRowSelection(this.specItemList[j], true);
              }
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .select-top {
  .el-table__header .cell .el-checkbox__inner {
    display: none;
  }
  }

  .radio-txt .el-radio__label{
    display: none;
  }
</style>
